<template>
  <div
    class="title-wrap"
    :class="[!line ? 'no-line' : '', noLineHeight ? 'no-line-padding' : '']"
  >
    <div v-if="name" class="title-info">
      <span class="name">
        {{ name }}
        <slot name="tip"></slot>
      </span>
      <slot name="append"></slot>
    </div>
    <div class="title-container" :class="!name ? 'no-container' : ''">
      <slot name="container"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    line: {
      type: Boolean,
      default: false,
    },
    noLineHeight: {
      type: Boolean,
      default: true,
    },
    // required: {
    //   type: Boolean,
    //   default: false,
    // },
  },
};
</script>
<style lang="scss" scoped>
.title-wrap {
  // border-bottom: 1px solid #e1e2e5;
  // margin-bottom: 16px;
  zoom: 1;
  line-height: 20px;
  // height: 20px;
  // background: rgb(239, 239, 239);
  .title-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    span.name {
      // border-left: 6px solid #2c8cefcf;
      // padding-left: 8px;
      text-align: left;
      font-size: 18px;
      color: rgb(100, 16, 19);
      // opacity: 0.8;
      font-weight: normal;
      margin-left: 20px;
      // border-radius: 2px;
      // em {
      //   font-style: normal;
      //   color: #ec6324;
      // }
    }
  }
  .title-container {
    padding: 16px 0;
  }
  .no-container {
    padding-top: 0;
  }
}
.title-wrap.no-line {
  border-bottom: 0 none;
}
.title-wrap.no-line-padding {
  margin-bottom: 0;
  .title-container {
    padding: 0;
  }
}
.title-wrap:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
</style>
